<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/axios.min.js"></script>
<script src="/js/util.js"></script>
<script>
    function registerUser() {
        var face;
        document.getElementsByName("face").forEach(n=>{
            if(n.checked){
                face=n.value;
            }
        })

        if ($("nameSpan").innerHTML == "可以使用" && $("confirmSpan").innerHTML != "两次密码不一致") {
            axios.get("/user/register", {
                params: {
                    username: $("username").value,
                    password: $("password").value,
                    email: $("email").value,
                    face,
                }
            }).then(resp => {
                if (resp.data == "ok") {
                    document.getElementsByTagName("body").item(0).innerHTML = `注册成功！<br>
                        立即<a href="/login.html">登陆</a>`;
                }
            })
        }
    }

    function checkUser() {
        axios.get("/user/checkUser", {
            params: {
                username: $("username").value
            }
        }).then(resp => {
            if (resp.data != "") {
                $("nameSpan").innerHTML = "该用户已存在"
            } else {
                $("nameSpan").innerHTML = "可以使用"
            }
        })
    }

    function resetForm() {
        $("username").value = $("password").value = $("confirm").value = $("email").value = null;
    }

    function confirmPassword() {
        if ($("password").value != $("confirm").value) {
            $("confirmSpan").innerHTML = "两次密码不一致";
        } else {
            $("confirmSpan").innerHTML = null;
        }
    }
</script>
<body>
<p>新用户注册</p>
用户名：<input type="text" id="username" onblur="checkUser()">
<span id="nameSpan"></span><br>
密码：<input type="password" id="password"><br>
密码确认：<input type="password" id="confirm" onblur="confirmPassword()">
<span id="confirmSpan"></span><br>
邮箱：<input type="text" id="email"><br>
头像：
<div>
    <input type="radio" name="face" value="1.jpg" checked><img src="/face/1.jpg" width="50" height="50">
    <input type="radio" name="face" value="2.jpg"><img src="/face/2.jpg" width="50" height="50">
    <input type="radio" name="face" value="3.jpg"><img src="/face/3.jpg" width="50" height="50">
    <input type="radio" name="face" value="4.jpg"><img src="/face/4.jpg" width="50" height="50">
</div>
<input type="button" value="注册" onclick="registerUser()">
<input type="button" value="重置" onclick="resetForm()">
</body>
</html>